<template>
  <el-dialog
    title="导入"
    :visible="dialogVisible"
    append-to-body
    width="500px"
    @close="close"
  >
    <el-upload
      ref="upload"
      class="upload-demo"
      :headers="{token: token}"
      :auto-upload="false"
      :limit="1"
      action="/"
      :on-success="fileSuccess"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-change="fileChange"
      :before-remove="beforeRemove"
      :on-exceed="handleExceed"
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      :file-list="fileList"
    >
      <el-button size="small" type="primary" :disabled="canUpload">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">智能上次Excel文件</div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel('ruleForm')">取消</el-button>
      <el-button type="primary" @click="submit('ruleForm')">导入</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { mapGetters } from 'vuex'
  import I18nApi from '@/api/basebiz/I18nApi'
  export default {
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        token: localStorage.getItem('token') || '',
        fileList: [],
        canUpload: false,
        importing: false,
        file: null
      }
    },
    computed: {
      ...mapGetters(['dictList']),
      importUrl() {
        return I18nApi.impData()
      }
    },
    mounted() {
    },
    methods: {
      cancel(formName) {
        this.$emit('update:dialogVisible', false)
      },
      submit(formName) {
        this.importData()
      },
      close() {
        this.$emit('update:dialogVisible', false)
      },
      fileSuccess(response, file, fileList) {
        if (response.code === 0) {
          this.$message.success(response.message)
          this.$emit('loadData')
          this.$emit('update:dialogVisible', false)
        } else if (response.code === 8) {
          this.$message.warning(response.message)
        } else {
          this.$message.error(response.message)
        }
      },
      handlePreview(file) {
        // console.log(file)
      },
      handleRemove(file, fileList) {
        this.canUpload = fileList.length === 1
      },
      fileChange(file, fileList) {
        this.canUpload = fileList.length === 1
        this.file = file
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除${file.name}`)
      },
      handleExceed(files, fileList) {
        this.$message.warning('超过最大文件上传个数')
      },
      importData() {
        // this.$refs.upload.submit()
        this.$emit('importFile', this.file)
        this.$emit('update:dialogVisible', false)
      }
    }
  }
</script>
